<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>众筹</title>
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/page.css">
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/media.js"></script>
		<script src="../js/common.js"></script>

		<style>
			.focus {
				width: 100%;
				height: 2.4rem;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			
			.focus .hd {
				width: 100%;
				height: 11px;
				position: absolute;
				z-index: 1;
				bottom: 5px;
				text-align: center;
			}
			
			.focus .hd ul {
				display: inline-block;
				height: 5px;
				padding: 3px 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				font-size: 0;
				vertical-align: top;
			}
			
			.focus .hd ul li {
				display: inline-block;
				width: 5px;
				height: 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				background: #8C8C8C;
				margin: 0 5px;
				vertical-align: top;
				overflow: hidden;
			}
			
			.focus .hd ul .on {
				background: #fff;
			}
			
			.focus .bd {
				position: relative;
				z-index: 0;
			}
			
			.focus .bd li img {
				width: 100%;
				height: 2.4rem;
				background: url(images/loading.gif) center center no-repeat;
			}
			
			.focus .bd li a {
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				/* 取消链接高亮 */
			}
			
			.section-3s {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				line-height: 40px;
				background: #5F3104;
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
			
			.All-the-chips-info .bottom_box button {
				position: absolute;
				bottom: 0;
			}
			
			.All-the-chips-info .bottom_box {
				width: 100%;
				height: 1.85rem;
			}
			
			.All-the-chips-info .bottom_box .info .right .bottom {
				position: absolute;
				bottom: 5px;
			}
			
			.All-the-chips-info .bottom_box .info {
				position: relative;
			}
			
			#pcss {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				line-height: 0.16rem;
				margin-bottom: initial;
			}
		</style>
	</head>
	<body>
		<div id="loadingToast" class="weui_loading_toast" style="display:block;">
			<div class="weui_mask_transparent"></div>
			<div class="weui_toast">
				<div class="weui_loading">
					<!-- :) -->
					<div class="weui_loading_leaf weui_loading_leaf_0"></div>
					<div class="weui_loading_leaf weui_loading_leaf_1"></div>
					<div class="weui_loading_leaf weui_loading_leaf_2"></div>
					<div class="weui_loading_leaf weui_loading_leaf_3"></div>
					<div class="weui_loading_leaf weui_loading_leaf_4"></div>
					<div class="weui_loading_leaf weui_loading_leaf_5"></div>
					<div class="weui_loading_leaf weui_loading_leaf_6"></div>
					<div class="weui_loading_leaf weui_loading_leaf_7"></div>
					<div class="weui_loading_leaf weui_loading_leaf_8"></div>
					<div class="weui_loading_leaf weui_loading_leaf_9"></div>
					<div class="weui_loading_leaf weui_loading_leaf_10"></div>
					<div class="weui_loading_leaf weui_loading_leaf_11"></div>
				</div>
				<p class="weui_toast_content">数据加载中...</p>
			</div>
		</div>
		<!--正文-->
		<div id="content" style="display: none;">
			<div class="All-the-chips-info bc-gray">
				<!--<div id="focus" class="focus">
		            <div class="hd">
		                <ul>
		
		                </ul>
		            </div>
		            <div class="bd">
		                <ul>
		                  
		                </ul>
		            </div>
		        </div>-->
				<img src="" alt="" id="imgssss" style="width: 100%">
				<section class="section-1">

					<!--<p class="tip">内容内容内容内容内容内容内容内容内容内容内容内容</p>-->
					<!--<p class="t1 flex">-->
					<!--<span style="color:rgba(18,18,18,0.25);" class="add_good">12</span>-->
					<!--<em class="add_collection">12</em>-->
					<!--</p>-->
					<p class="rage" id="rages">
						<!--<progress id="myProgress" value="0" max="100" style="width:3rem"></progress><span style="float:right;"></span>-->
					</p>
					<div class="b-tab flex">
						<div>
							<p class="p1">支持人数</p>
							<p class="p2" id="supportNum">1544人</p>
						</div>
						<div>
							<p class="p1">已筹金额</p>
							<p class="p2" id="amountaofmoney">31.08万元</p>
						</div>
						<div>
							<p class="p1">剩余时间</p>
							<p class="p2" id="last_time">26天</p>
						</div>
					</div>
				</section>
				<section class="section-2" style="margin-bottom: 60px;">
					<h4>产品详情</h4>
					<!--<img src="../img/配图@2x 2.png" />-->
					<div id="comment_intro">

					</div>
					<p id="produceContent"></p>
				</section>
				<section class="section-3s">立即认筹</section>
				<section class="bottom_box">
					<div class="title">项目回报<img src="../img/关闭@2x.png" alt="" style="width:.16rem;height:.16rem;float:right;"></div>
					<!--<p class="t1">回报一</p>-->
					<div class="info clearfix">
						<img src="../img/配图@2x.png" alt="" id="imgssss2">
						<div class="right">
							<div class="top" id="pcss"></div>
							<!--<div class="bottom" id="lastmoney"></div>--><!--程占朋-->
							<input type="text" id="lastmoney" class="bottom" style="width: 2.7rem;" placeholder="请输入您的认筹金额" onkeyup="value=value.replace(/[^(\d|\.)]/g,'');this.value=/^\d+\.?\d{0,2}$/.test(this.value)?this.value: this.value.split('.')[1].length==2?this.value:this.value=this.value.split('.')[0]+'.'+this.value.split('.')[1].substr(0,2);"/>
						</div>
					</div>
					<!--<p class="t2" style="margin-top:.26rem;margin-bottom:.15rem;">项目回报</p>
		            <div class="price">
		                <span class="active">￥100</span>
		                <span>￥100</span>
		            </div>-->
					<button onclick="ljpay()">立即认筹</button>
				</section>
			</div>
			<!--灰色浮层-->
			<div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:.84rem;"></div>
		</div>
		<script>
			var lastMoney = '';
			var maxMoney = '';
			$(function() {
				setTimeout(function() {
						$("#loadingToast").hide();
						$("#content").show();
					}, 1000)
					// 点击综合推荐
				$('.hd span').click(function() {
					$(this).toggleClass('active').siblings().removeClass('active');
					$('.mask').fadeToggle();
					var idx = $(this).index();
					$('.td>div').eq(idx).toggleClass('active').siblings().removeClass('active');

					$(this).toggleClass('arrow-top')

				})
				$('.td1 ul li').click(function() {
					$(this).addClass('active').siblings().removeClass('active');
					$('.mask').hide();
					$('.td>div').removeClass('active');
				})
				$('.section-3s ').click(function() {
					$('.bottom_box').css('bottom', '0');
				})
				$('.bottom_box .title img').click(function() {
					$('.bottom_box').css('bottom', '-10000px')
				})

			})
		</script>
		<script>
			$(function() {
				var cf_id = getQueryString('cf_id');
				var p_id;
				$.ajax({
					url: base_url + 'ZITAOHUI/cowdFundingDetail',
					data: {
						cfid: cf_id
					},
					success: function(data) {
						//console.log(data)
						// 缓存轮播图的数据
						var img_arr = data.extend.data[0];
						console.log(img_arr);
						//                    $('#focus .bd ul').append(li);
						// 储存接口提供的所有数据,除轮播图
						var datas = data.extend.data[1];
						$("#imgssss").attr("src", datas.produceHeadImages);
						var $li = '';
						for(var j = 0; j < img_arr.length; j++) {
							$li += '<li><img style="display: block" src="' + img_arr[j].images + '"></li>';
						}
						$("#imgssss2").attr("src", datas.produceHeadImages);
						$("#comment_intro").append($li);
						p_id = datas.produceId;

						// 计算目前众筹的进度
						var all_price = datas.targetAmount; // 总金额
						var now_price = datas.amountaofmoney; // 目前募集到的金额
						var rate = (now_price / all_price) * 100;
						$('progress').attr('value', rate).siblings('span').html(rate + '%')

						// 填充支持人数，已有金额
						$('#supportNum').html(datas.supportNum + '人')
						$('#amountaofmoney').html(datas.amountaofmoney + '元')
						//$('#lastmoney').html(datas.minimumMoney + "元");//最少支持的钱数
						//lastMoney = datas.minimumMoney;//最少支持的钱数
						maxMoney = (datas.targetAmount - datas.amountaofmoney).toFixed(2);//剩余能众筹的钱数
						$('.section-2 img').attr('src', datas.produceHeadImages);
						$('.section-2 p').attr('src', datas.produceDiscribe);
						$("#rages").append('<progress id="myProgress" value="' + datas.minimumMoney + '" max="' + datas.targetAmount + '" style="width:3rem"></progress><span style="float:right;">' + res(datas.amountaofmoney, datas.targetAmount) + '</span>');
						$("#produceContent").text(datas.produceDiscribe);
						$("#pcss").text(datas.produceContent);
						daojishi(datas.surplusTime);
					}
				})
				var way = {
					// 点赞
					add_goog: function(id1, aim) {
						//console.log(aim)
						$.ajax({
							url: base_url + 'ZITAOHUI/goodNum',
							data: {
								produceId: id1,
								user_id: u_id
							},
							success: function(data) {
								//console.log(data)
								var sun = data.extend.haha;
								// sun = sun.haha.list;
								if(sun == 1) {
									aim.html(parseFloat(aim.html()) + 1);
								} else if(sun == 2) {
									alert('网络不好，请稍后再试')
								} else {
									alert('您已经对该商品点过赞啦')
								}
							},
							error: (data) => console.log(data)
						})
					},
					// 添加收藏
					add_collection: function(id, aim) {
						$.ajax({
							url: base_url + 'ZITAOHUI/conllectionNum',
							data: {
								produceId: id,
								user_id: u_id
							},
							success: {
								function(data) {
									// //console.log(data)
									var sun = data.data.extend;
									sun = sun.list.conllection;
									if(sun == 1) {
										aim.html(parseFloat(aim.html()) + 1);
									} else if(sun == 2) {
										alert('网络不好，请稍后再试')
									} else {
										alert('您已经对该商品点过收藏啦')
									}
								}
							}
						})
					}
				}
				$('.add_good').click(function() {
					way.add_goog(p_id, $(this))
				})
			})
			function res(a, b) {
				if(a == 0) {
					return 0 + "%";
				} else {
					var ss = a / b * 100;
					return ss + "%";
				}
			}
			var otimer = '';
			function daojishi(surplusTime) {
				clearInterval(otimer);
				var mss = '';
				var msg = '';

				otimer = setInterval(function() {
					if(surplusTime <= 0) {
						$("#last_time").html('已结束');
					} else {
						var dd = parseInt(surplusTime / 60 / 60 / 24, 10); //计算剩余的天数
						var hh = parseInt(surplusTime / 60 / 60 % 24, 10); //计算剩余的小时数
						var mm = parseInt(surplusTime / 60 % 60, 10); //计算剩余的分钟数
						var ss = parseInt(surplusTime % 60, 10); //计算剩余的秒数
						hh = checkTime(hh);
						mm = checkTime(mm);
						ss = checkTime(ss);
						msg = "距离结束" + dd +"天 "+ hh + ":" + mm + ":" + ss ;
						surplusTime--;
						$("#last_time").text(msg);
					}
				}, 1000);
			}
			function ljpay() {
				lastMoney = $("#lastmoney").val();
				console.log("认筹金额："+lastMoney);
				if(lastMoney == null || lastMoney == ''){
					alert('请填写认筹金额');
				}
//				}else if(lastMoney > maxMoney){
//					alert('您输入的金额大于剩余的众筹金额');
//				}
				else{
					window.location.href = "userPay.html?orderType=5&price=" + lastMoney + "&num=" + getQueryString("cf_id"); //orderType=5表示是众筹
				}
			}
			function checkTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return i;
			}
		</script>
		<script src="../js/TouchSlide.1.1.js"></script>
		<script type="text/javascript">
			$(function() {
				setTimeout(function() {
					TouchSlide({
						slideCell: "#focus",
						titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
						mainCell: ".bd ul",
						effect: "left",
						autoPlay: true, //自动播放
						autoPage: true, //自动分页
						switchLoad: "_src" //切换加载，真实图片路径为"_src" 
					});
				}, 800);
			})
		</script>
	</body>

</html>